<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文案管理系统 - 视频管理</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <link href="#(CPATH)/aiv/css/list.css" rel="stylesheet">
</head>
<body>
<div class="container container-main">
    <!-- 顶部标题 -->
    <div class="text-center mb-5">
        <h1 class="display-5 fw-bold text-primary">
            <i class="fas fa-video me-2"></i>数字人设定
        </h1>
        <p class="lead text-muted">高效管理您的讲解人视频资源</p>
    </div>

    <!-- 视频管理卡片 -->
    <div class="card card-shadow mb-5">
        <div class="card-header bg-white d-flex justify-content-between align-items-center flex-wrap">
            <h3 class="section-header mb-0">
                <i class="fas fa-user-tie text-primary me-2"></i>数字人视频列表
            </h3>
            <div class="d-flex align-items-center header-buttons">
                <a href="/plVideo/add" class="btn btn-primary btn-action me-2">
                    <i class="fas fa-plus-circle me-2"></i>添加
                </a>
                <a href="/plScriptgen/toText2video" class="btn btn-outline-primary btn-action me-2">
                    <i class="fas fa-level-up-alt me-2"></i>返回
                </a>
                <a href="/main" class="btn btn-outline-primary btn-action">
                    <i class="fas fa-home me-2"></i>首页
                </a>

            </div>
        </div>
        <div class="card-body">
            <!-- 数据表格 -->
            <div class="table-card">
                <table class="table table-hover mb-0">
                    <thead class="table-light">
                    <tr>
                        <th>ID</th>
                        <th>视频名称</th>
                        <th>类型</th>
                        <th>概率</th>
                        <th>状态</th>
                        <th>创建时间</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <!-- 示例数据行 1 -->
                    #for(video : videoList)
                    <tr>
                        <td class="fw-bold">#(video.id)</td>
                        <td>#(video.name)</td>
                        <td>
                            #switch(video.type)
                            #case("1") <span class="badge bg-info">默认</span>
                            #end
                        </td>
                        <td>
                            <div class="d-flex align-items-center">
                                <div class="progress w-100 me-2" style="height: 8px;">
                                    <div class="progress-bar bg-success" role="progressbar" style="width: #(video.odds)0%;" aria-valuenow="#(video.odds)0" aria-valuemin="0" aria-valuemax="100"></div>
                                </div>
                                <span>#(video.odds)0%</span>
                            </div>
                        </td>
                        <td>
                            #if(video.state == 'Y')
                            <span class="status-badge bg-success text-white">启用</span>
                            #else
                            <span class="status-badge bg-secondary text-white">停用</span>
                            #end
                        </td>
                        <td>2023-10-15 14:30</td>
                        <td class="action-buttons">
                            <a href="/plVideo/edit/#(video.id)" class="btn btn-sm btn-warning">
                                <i class="fas fa-edit"></i> 编辑
                            </a>
                            <button onclick="confirmDelete(#(video.id))" class="btn btn-sm btn-danger">
                                <i class="fas fa-trash-alt"></i> 删除
                            </button>
                        </td>
                    </tr>
                    #end

                    </tbody>
                </table>
            </div>

        </div>
    </div>
</div>

<!-- 引入Bootstrap JS -->
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.1.3/js/bootstrap.bundle.min.js"></script>

<script>
    function confirmDelete(id) {
        if (confirm('确定删除该视频？')) {
            window.location.href = '/plVideo/delete/' + id;
        }
    }
</script>
</body>
</html>